<template>
	<view>
		<view class="header">
			<view class="title">红包记录</view>
		</view>

		<view class="content">
			<scroll-view scroll-y="true" @scrolltolower="loadData" class="scroll-view">
				<view v-for="(item, index) in recordList" :key="index" class="record-card">
					<view class="card-header">
						<view class="time">{{item.create_time}}</view>
					</view>
					<view class="card-content">
						<view class="user-info">
							<image :src="item.avatar" class="avatar"></image>
							<view class="info">
								<view class="nickname">{{item.nickname}}</view>
								<view class="name-phone">{{item.real_name}} | {{item.mobile}}</view>
							</view>
							<view class="amount">¥{{item.amount}}</view>
						</view>
						<view class="source-order" v-if="item.source_order">
							<view class="source-title">来源订单</view>
							<view class="source-user">
								<image :src="item.source_order.avatar" class="source-avatar"></image>
								<view class="source-info">
									<view class="source-nickname">{{item.source_order.nickname}}</view>
									<view class="source-name-phone">{{item.source_order.real_name}} | {{item.source_order.mobile}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/staff'
	import storage from '@/utils/storage'
	
	export default {
		data() {
			return {
				activityId: 0,
				recordList: [],
				// 分页参数
				page: 1,
				page_size: 10,
				hasMore: true
			}
		},
		onLoad() {
			this.activityId = storage.get('activityId')
			this.loadData()
		},
		methods: {
			loadData() {
				// 如果没有更多数据，直接返回
				if (!this.hasMore) return
				
				api.getRedPacketRecord({
					activity_id: this.activityId,
					page: this.page,
					page_size: this.page_size
				}).then(res => {
					if (res.code === 200) {
						// 如果是第一页，直接赋值
						if (this.page === 1) {
							this.recordList = res.data.map(item => ({
								create_time: item.create_time,
								avatar: item.avatar_url,
								nickname: item.nickname,
								real_name: item.name || '--',
								mobile: item.phone || '--',
								amount: item.amount,
								source_order: item.source ? {
									avatar: item.source.avatar_url,
									nickname: item.source.nickname,
									real_name: item.source.name || '--',
									mobile: item.source.phone || '--'
								} : null
							}))
						} else {
							// 否则追加数据
							const newData = res.data.map(item => ({
								create_time: item.create_time,
								avatar: item.avatar_url,
								nickname: item.nickname,
								real_name: item.name || '--',
								mobile: item.phone || '--',
								amount: item.amount,
								source_order: item.source ? {
									avatar: item.source.avatar_url,
									nickname: item.source.nickname,
									real_name: item.source.name || '--',
									mobile: item.source.phone || '--'
								} : null
							}))
							this.recordList = [...this.recordList, ...newData]
						}
						
						// 判断是否还有更多数据
						this.hasMore = res.data.length === this.page_size
						// 页码加1
						if (this.hasMore) {
							this.page++
						}
					}
				})
			},
			// 重置并刷新数据
			refreshData() {
				this.page = 1
				this.hasMore = true
				this.recordList = []
				this.loadData()
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F7FB;
	}

	.header {
		background-color: #FFAC3E;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 250rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.header > .title {
		color: #fff;
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.content {
		position: relative;
		margin-top: 140rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.scroll-view {
		height: calc(100vh - 140rpx - 40rpx);
	}

	.record-card {
		width: 100%;
		border-radius: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
	}

	.card-header {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.card-content {
		padding-top: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.name-phone {
		font-size: 24rpx;
		color: #999;
	}

	.amount {
		font-size: 36rpx;
		color: #FF6B6B;
		font-weight: bold;
	}

	.source-order {
		background-color: #f8f8f8;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.source-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.source-user {
		display: flex;
		align-items: center;
	}

	.source-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.source-info {
		flex: 1;
	}

	.source-nickname {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 4rpx;
	}

	.source-name-phone {
		font-size: 24rpx;
		color: #999;
	}
</style> 